import React, { useEffect, useState } from "react";
import { Modal, Form, InputNumber, DatePicker, Row, Col, Table } from "antd";
import { modalPropsType, receivableBillTypes } from "@/constants/types";
import type { ColumnsType } from 'antd/es/table';
import { billWriteOffPreview } from "../../services";
import XlSelect from "@/components/Form/XlSelect";

const {Item} = Form;
const labelCol = {span: 5}

const BillBatchPay = ({visible, onCancel, onSubmit, title, loading, selectedRowKeys}: modalPropsType) => {
  const [form] = Form.useForm();
  const [info, setInfo] = useState<any>(null);


  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      billIds: info?.billIds || selectedRowKeys,
      paymentId: res?.paymentId
    });
  }

  const columns: ColumnsType<receivableBillTypes> = [
    {
      title: "账单号",
      dataIndex: "billCode"
    },
    {
      title: "渠道",
      dataIndex: "product"
    },
    {
      title: "仓库代码",
      dataIndex: "destCode"
    },
    {
      title: "费用",
      dataIndex: "amount"
    },
  ];


  useEffect(() => {
    if (selectedRowKeys?.length > 0) {
      billWriteOffPreview({
        ids: selectedRowKeys
      }).then(
        res => {
          if (res?.code === '0') {
            setInfo(res?.data);
          } 
        }
      )
    } else {
      setInfo(null);
    }
  }, [JSON.stringify(selectedRowKeys)])

  return (
    <Modal
      open={visible}
      maskClosable={false}
      width="850px"
      confirmLoading={loading}
      title={title}
      onCancel={onCancel}
      onOk={handleSubmit}
    >
      <Table
        rowKey="billCode"
        bordered
        dataSource={info?.billDataList || []}
        columns={columns}
      />
      <Form form={form} labelCol={labelCol} style={{marginTop: 20}}>
        <Row>
          <Col span={12}>
            <Item label="付款金额" name="paymentId" rules={[{required: true}]}>
              <XlSelect options={info?.paymentDataList || []} dataValue="paymentId" dataLabel="amount"  />
            </Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
}
export default BillBatchPay;